import React, { Component } from "react";
import { Select } from "antd";
import Model from "./data";
import "antd/dist/antd.css";

const Option = Select.Option;
export default class ThreeAreas extends Component {
  state = {
    capitals: [], // 省份
    city: [], // 市
    areaList: [], // 区
  };
  componentDidMount() {
    this.handleAddressData();
  }
  handleAddressData = () => {
    const da = Model.get();
    if (da && da.length > 0) {
      this.setState({
        capitals: da,
      });
    }
  };
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  getCity = (value) => {
    console.log(`selecte ${value}`); // 1111111111
    const { capitals } = this.state;
    let da = [];
    capitals.map((item) => (item.name === value ? (da = item.cityList) : ""));
    this.setState({
      city: da,
    });
  };
  getSreaList = (value) => {
    console.log(`selecte ${value}`); // 11111111111
    const { city } = this.state;
    let ci = [];
    city.map((item) => (item.name === value ? (ci = item.areaList) : ""));
    this.setState({
      areaList: ci,
    });
  };
  getData = (value) => {
    console.log(`selecte ${value}`); // 11111111111
  };

  fn1 = this.props.fn1;

  render() {
    return (
      <div style={{ display: "inline-block" }}>
        <Select
          showSearch
          style={{ width: 128, marginRight: "5px"}}
          placeholder="省份"
          optionFilterProp="children"
          onChange={this.getCity}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          {this.state.capitals.map((item, key) => {
            // eslint-disable-next-line no-unused-expressions
            return (
              <Option key={key} value={item.name}>
                {item.name}
              </Option>
            );
          })}
        </Select>
        <Select
          showSearch
          style={{ width: 128, marginRight: "5px" }}
          placeholder="市"
          optionFilterProp="children"
          onChange={this.getSreaList}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          {this.state.city.map((item, key) => {
            return (
              <Option key={key} value={item.name}>
                {item.name}
              </Option>
            );
          })}
        </Select>
        <Select
          showSearch
          style={{ width: 128 }}
          placeholder="区"
          optionFilterProp="children"
          onChange={this.getData}
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
        >
          {this.state.areaList.map((item, key) => {
            return (
              <Option key={key} value={item}>
                {item}
              </Option>
            );
          })}
        </Select>
      </div>
    );
  }
}
